<script setup>
import { ref, onMounted } from 'vue'
import { getDischargeRecordList } from '@/api/hospitalizationRecord'
import { getDischargeInfo, discharge } from '@/api/patient'
import { ElMessage } from 'element-plus'
import { useStatusStore } from '@/stores'

// 患者ID
const patientId = ref()
// 患者信息
const patientInfo = ref(null)

const getPatientInfo = async () => {
  if (!patientId.value) {
    ElMessage.error('请先输入病案号')
    return
  }
  const res = await getDischargeInfo(patientId.value)
  patientInfo.value = res.data
  patientInfo.value.totalCost =
    patientInfo.value.bedCost + patientInfo.value.treatmentCost

  ElMessage.success(res.msg)
}

const showPayment = ref(false)
const payText = ref('等待用户支付...')
const statusStore = useStatusStore()

// 提交表单
const handleSubmit = async () => {
  if (patientInfo.value) {
    showPayment.value = true
    // 等待 5 秒后执行
    await new Promise((resolve) => setTimeout(resolve, 4000))
    payText.value = '支付成功，正在跳转...'
    await new Promise((resolve) => setTimeout(resolve, 1000))

    // 出院
    const res = await discharge(patientId.value)
    handlePageQuery()

    ElMessage.success(res.msg)

    statusStore.setComponentKey(statusStore.componentKey + 1)

    payText.value = '等待用户支付...'
    showPayment.value = false
    // 重置表单
    patientId.value = ''
    patientInfo.value = null
  } else {
    getPatientInfo()
  }
}

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 出院记录
const records = ref([])

const handlePageQuery = async () => {
  const res = await getDischargeRecordList({
    pageNumber: currentPage.value,
    pageSize: pageSize.value
  })

  records.value = res.data.records.map((record) => ({
    ...record,
    totalFee: record.hospitalizationFee + record.treatmentFee
  }))
  total.value = res.data.total
}

onMounted(() => {
  handlePageQuery()
})

const toBack = () => {
  // 重置表单
  patientId.value = ''
  patientInfo.value = null
}
</script>

<template>
  <div class="discharge">
    <h2>出院办理</h2>

    <!-- 出院办理表单 -->
    <overview-card class="form-container">
      <h3>出院信息</h3>

      <el-form label-width="8rem" class="form-content">
        <div class="form-id">
          <el-form-item label="病案号" required>
            <el-input
              v-model="patientId"
              placeholder="请输入病案号"
              :disabled="patientInfo ? true : false"
            />
          </el-form-item>
        </div>

        <div v-if="patientInfo" class="form-info">
          <el-form-item label="姓名">
            <el-input v-model="patientInfo.name" disabled />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="patientInfo.gender" disabled>
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="patientInfo.phoneNumber" disabled />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="patientInfo.address" disabled />
          </el-form-item>
          <el-form-item label="科室">
            <el-input v-model="patientInfo.deptName" disabled />
          </el-form-item>
          <el-form-item label="病房">
            <el-input v-model="patientInfo.wardId" disabled />
          </el-form-item>
          <el-form-item label="床位">
            <el-input v-model="patientInfo.bedId" disabled />
          </el-form-item>
          <el-form-item label="入院时间">
            <el-date-picker
              v-model="patientInfo.admissionTime"
              type="datetime"
              format="YYYY/MM/DD hh:mm"
              value-format="YYYY-MM-DD hh:mm"
              style="width: 100%"
              disabled
            />
          </el-form-item>
          <el-form-item label="出院时间">
            <el-date-picker
              v-model="patientInfo.dischargeTime"
              type="datetime"
              format="YYYY/MM/DD hh:mm"
              value-format="YYYY-MM-DD hh:mm"
              style="width: 100%"
              disabled
            />
          </el-form-item>
          <el-form-item label="住院费用/(元)">
            <el-input v-model="patientInfo.bedCost" disabled />
          </el-form-item>
          <el-form-item label="治疗费用/(元)">
            <el-input v-model="patientInfo.treatmentCost" disabled />
          </el-form-item>
          <el-form-item label="总费用/(元)">
            <el-input v-model="patientInfo.totalCost" disabled />
          </el-form-item>
        </div>

        <div class="btn-container">
          <Button
            v-if="patientInfo"
            class="to-back"
            @click.prevent="toBack"
            text="上一步"
          >
          </Button>
          <Button
            class="btn-submit"
            @click.prevent="handleSubmit"
            :text="patientInfo ? '结算' : '下一步'"
          >
          </Button>
        </div>
      </el-form>
    </overview-card>

    <!-- 出院记录列表 -->
    <overview-card class="records-container">
      <h3>出院记录</h3>
      <el-table
        :data="records"
        border
        stripe
        style="width: 100%"
        height="60rem"
      >
        <el-table-column prop="patientId" label="病案号" />
        <el-table-column prop="patientName" label="病人姓名" />
        <el-table-column prop="phoneNumber" label="联系电话" />
        <el-table-column prop="doctorName" label="医生姓名" />
        <el-table-column prop="deptName" label="所在科室"> </el-table-column>
        <el-table-column
          prop="dischargeTime"
          label="出院时间"
        ></el-table-column>
        <el-table-column
          prop="hospitalizationFee"
          label="住院费用/(元)"
        ></el-table-column>
        <el-table-column
          prop="treatmentFee"
          label="治疗费用/(元)"
        ></el-table-column>
        <el-table-column prop="totalFee" label="总费用/(元)"></el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 500]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageQuery"
        @current-change="handlePageQuery"
      />
    </overview-card>

    <popup-card :show="showPayment" class="payment-popup">
      <h3>请耐心等待</h3>
      <p>{{ payText }}</p>
    </popup-card>
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/scss/abstracts/variables' as *;
@use '@/assets/scss/abstracts/mixins' as *;
@use 'sass:color';

.discharge {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;

  .form-container,
  .records-container {
    &:hover {
      transform: none;
    }
  }

  .form-content {
    display: flex;
    flex-direction: column;

    .form-id {
      margin-top: 4rem;
    }
    .form-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    :deep(.el-form-item) {
      position: relative;
    }

    :deep(.el-form-item__label) {
      font-size: 1.2rem;
      position: absolute;
      top: -3rem;
      justify-content: flex-start;
    }

    .btn-container {
      display: flex;
      justify-content: space-between;

      .btn-submit,
      .to-back {
        width: 15%;

        &:hover {
          background-color: color.adjust(
            $color-primary-dark-2,
            $lightness: -10%
          );
        }
      }

      .btn-submit {
        margin-left: auto;
      }
    }
  }

  .records-container {
    h3 {
      margin-bottom: 1.5rem;
    }

    .el-pagination {
      margin-top: 2rem;
      justify-self: center;
    }
  }

  .payment-popup {
    :deep(.popup-card) {
      height: 10rem;
      width: 30rem;
    }

    p {
      font-size: 1.4rem;
      text-align: center;
      margin-top: 1rem;
    }
  }
}
</style>
